import React from 'react'
import PubSub from 'pubsub-js'
const TakeNum = () => {
    const [num,setNum] = React.useState<number>(1)
    const subNum = () => {
        if(num === 1) return
        setNum(preNum => preNum - 1)
    }
    const addNum = () => {
        setNum(preNum => preNum + 1)
    }
    React.useEffect(() => {
        setTimeout(() => {
            PubSub.publish('changeNum',num)
        },200)
    }, [ ])// eslint-disable-line react-hooks/exhaustive-deps
    React.useMemo(() => {
        PubSub.publish('changeNum',num)
    },[num])// eslint-disable-line react-hooks/exhaustive-deps
    return (
        <div style={{
            marginTop: '1.5vh',
            backgroundColor: '#fff',
            padding: '1vh 5vw',
            display: 'flex',
            alignItems: 'center',
        }}>
            <span style={{color: '#666',fontSize: '13px'}}>购买数量</span>
            <div style={{
                display: 'flex',
                marginLeft: '10vw'
            }}>
                <div style={{
                    border: '1px solid #999',
                    padding: '1vh 3vw',
                    fontSize: '16px',
                    borderRadius: '5px 0 0 5px'
                }}  onClick={subNum}>-</div>
                <div style={{
                    borderTop: '1px solid #999',
                    borderBottom: '1px solid #999',
                    padding: '1vh 6vw',
                    color: '#f03e3e'
                }}>{num}</div>
                <div style={{
                    border: '1px solid #999',
                    padding: '1vh 3vw',
                    fontSize: '16px',
                    borderRadius: '0 5px 5px 0'
                }}  onClick={addNum}>+</div>
            </div>
        </div>
    )
}

export default TakeNum